<template>
  <div class="start" :style="{ 'opacity': opacity }" v-if="show">
    <div @click="startGame">{{ props.status == 'start' ? '开始游戏' : '游戏结束 重新开始' }}</div>
  </div>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch } from 'vue'
const emit = defineEmits(['start', 'restart'])
const props = defineProps({
  status: {
    type: String,
    default: 'start'
  }
})

const show = ref(true)
const opacity = ref(1)

watch(() => props.status, (newValue, oldValue) => {
  if (newValue == 'end') {
    show.value = true
    opacity.value = 1
  }
})

const startGame = () => {
  opacity.value = 0
  setTimeout(() => {
    show.value = false
  }, 1300);
  if (props.status == 'start') {
    emit('start')
  } else {
    emit('restart')
  }
}
</script>

<style>
.start {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #000; */
  transition: all 1.3s ease;
}
</style>